<template>
  <div class="article-item">
    <app-author-meta
      :image="article.author.image"
      :username="article.author.username"
      :createdTime="article.createdAt"
    />
    <div class="main">
      <h3 class="article-title">
        <router-link :to="{name: 'articleDetail', params: {slug: article.slug}}">{{article.title}}</router-link>
      </h3>
      <p>{{article.description}}</p>
    </div>
    <router-link
      :to="{name: 'articleDetail', params: {slug: article.slug}}"
      class="read-more"
    >
      阅读全文
    </router-link>
  </div>
</template>

<script lang="ts">
  import AppAuthorMeta from 'src/components/common/AppAuthorMeta/index.vue'
  import { PropType } from 'vue'
  export default {
    components: {
      AppAuthorMeta
    },
    props: {
      article: {
        type: Object as PropType<Article>,
        required: true
      }
    }
  }
</script>

<style lang="scss" scoped>
  @import "src/assets/scss/variables.scss";
  .article-item {
    height: 200px;
    padding: 24px 20px;
    margin-bottom: 32px;
    box-shadow: $shadow;
    display: flex;
    flex-direction: column;
  }
  .main {
    height: 92px;
    overflow: hidden;
  }
  .article-title {
    height: 25px;
    text-align: center;
  }
  .article-title a {
    font-size: 20px;
    color: $pitch-dark;
  }
  .main p {
    font-size: 14px;
    line-height: 1.5;
    text-indent: 2em;
  }
  .read-more {
    display: block;
    height: 18px;
    padding-right: 20px;
    font-size: 14px;
    text-align: right;
    color: $ching;
  }
</style>